<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 2. 定义根标签 -->
    <div id="root"></div>
    <!-- 1. 引入react的文件-->
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.js"></script>
    <!-- type="text/babel"的作用:让babel编译当前script标签中的代码 -->
    <script type="text/babel">
      // 3.根据需求创建虚拟dom
      const arr = [
        { name: 'hj', age: 38 },
        { name: 'ww', age: 48 },
      ]
      // 根据arr得到一个新的数组 [<li>...</li>,[<li>...</li>]
      /*lis的值: [<li>...</li>,[<li>...</li>]*/
      const lis = arr.map((item, index) => {
        return (
          // 当列表渲染的时候,我们需要在列表渲染的最外层标签添加一个key属性.
          // 这么做的目的是因为,加了key属性,react底层帮我们操作dom的时候性能会更好
          // 具体原因后面会详细介绍,现在记住就行
          // key的值要求在当前jsx结构的父元素范围内不重复即可
          <li key={index}>
            <h3>{item.name}</h3>
            <p>{item.age}</p>
          </li>
        )
      })
      const ul = <ul>{lis}</ul>
      // 4. 根据虚拟dom创建真实dom并渲染
      ReactDOM.createRoot(document.getElementById('root')).render(ul)
    </script>
  </body>
</html>
